<template>
<!-- component/shareMoments/popupShare/popupShare.wxml -->
<view :hidden="hidden">
  <!-- 画布 -->
  <canvas canvas-id="myCanvas" class="canvaStyle"></canvas>
  <!-- 预览区域 -->
  <view class="imagePathBox">
    <view class="shareBox">
      <image class="close-img" src="/static/images/close.png" @tap="close"></image>
      <image :class="res_guide?'shengcheng':'shengcheng2'" :src="imagePath||image"></image>
      <!--  -->
      <view class="save-text">保存图片后，可分享至朋友圈</view>
      <button class="save-btn" @tap="save">保存图片</button>
    </view>
  </view>
</view>
<!-- 分享菜单抽屉 -->
<!-- <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}" />
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">
  <view class="drawer_content">
    <view class="drawer_title">
      <button open-type="share">
        <image src="/images/share/group.png" mode="aspectFit" />
        <text>分享给好友</text>
      </button>
    </view>
    <view class="line-btn" />
    <view class="drawer_title">
      <button bindtap="bindMenu2">
        <image src="/images/share/friend.png" mode="aspectFit" />
        <text>分享到朋友圈</text>
      </button>
    </view>
  </view>
  <view class="cancel" bindtap="powerDrawer" data-statu="close">
    <text>取消</text>
  </view>
</view> -->
</template>

<script>
// component/shareMoments/popupShare/popupShare.js
var makeShareImg;
const app = getApp();
const util = require("../../utils/util.js");

export default {
  data() {
    return {
      showModalStatus: false,
      //是否显示分享
      hidden: true,
      imagePath: '',
      res_guide: '',
      animationData: "",
      showTypeStatus: false,
      actionSheetHidden: ""
    };
  },

  components: {},
  props: {
    showModalStatus: {
      type: Boolean,
      default: false
    },
    articleData: {
      type: Object,
      default: ''
    },
    image: {
      type: String,
      default: ''
    }
  },
  watch: {
    "showModalStatus": {
      handler: function (showModalStatus) {
        if (showModalStatus) this.bindMenu2();
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 分享菜单控制函数
    powerDrawer: function (e) {
      var currentStatu = e.currentTarget.dataset.statu;
      this.shareImage(currentStatu);
    },

    // 购买抽屉
    typeDrawer(e) {
      var type = e.currentTarget.dataset.type;
      var currentStatu = e.currentTarget.dataset.statu;
      this.shareImage(currentStatu, type);
    },

    // 分享动画
    shareImage(currentStatu, type) {
      /* 动画部分 */
      // 第1步：创建动画实例
      var animation = uni.createAnimation({
        duration: 200,
        //动画时长
        timingFunction: "linear",
        //线性
        delay: 0 //0则不延迟

      }); // 第2步：这个动画实例赋给当前的动画实例

      this.animation = animation; // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停

      animation.translateY(240).step(); // 第4步：导出动画对象赋给数据对象储存

      this.setData({
        animationData: animation.export()
      }); // 第5步：设置定时器到指定时候后，执行第二组动画

      setTimeout(() => {
        // 执行第二组动画：Y轴不偏移，停
        animation.translateY(0).step(); // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

        this.setData({
          animationData: animation.export()
        }); //关闭抽屉

        if (currentStatu == "close") {
          if (type) {
            this.setData({
              showTypeStatus: false
            });
          } else {
            this.setData({
              showModalStatus: false
            });
          }
        }
      }, 200); // 显示抽屉

      if (currentStatu == "open") {
        if (type) this.setData({
          showTypeStatus: true
        });else this.setData({
          showModalStatus: true
        });
      }
    },

    // 分享到朋友圈
    bindMenu2() {
      this.setData({
        showModalStatus: false,
        hidden: false
      });

      if (this.articleData == '') {
        return;
      }

      uni.showLoading({
        title: '努力生成中...'
      });
      this.drawImageCanvas();
    },

    close() {
      this.setData({
        hidden: true
      });
    },

    // 保存图片
    save() {
      var that = this; //生产环境时 记得这里要加入获取相册授权的代码

      uni.saveImageToPhotosAlbum({
        filePath: that.imagePath || that.image,

        success(res) {
          uni.showModal({
            content: '图片已保存到相册，赶紧分享到朋友圈吧~',
            showCancel: false,
            confirmText: '好哒',
            confirmColor: '#72B9C3',
            success: function (res) {
              if (res.confirm) {
                that.setData({
                  hidden: true
                });
              }
            }
          });
        },

        fail(err) {
          uni.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: modalSuccess => {
              uni.openSetting();
            }
          });
        }

      });
      this.setData({
        actionSheetHidden: !this.actionSheetHidden
      });
    },

    // 画布 分享到朋友圈
    drawImageCanvas: function () {
      let that = this;
      let res_id = this.articleData.id;
      let res_city = this.articleData.city;
      let res_title = this.articleData.title;
      let res_guide = this.articleData.guide;
      that.setData({
        res_guide
      });
      util.requestQrcode(res_id, res_city).then(req => {
        // 画布
        const ctx = uni.createCanvasContext('myCanvas', that);
        var logoPath = "/static/images/share/bdb.png";
        var bgImgPath = "/static/images/share/bgimg1.png";
        var bgImgPath2 = "/static/images/share/bgimg2.png";
        var canvasHeight = res_guide != '' ? 634 : 488;

        if (res_guide != '') {
          ctx.drawImage(bgImgPath, 100, 200, 488, canvasHeight);
          ctx.drawImage(logoPath, 125, 230, 96, 38);
          this.drawText({
            ctx: ctx,
            //画布上下文
            fontColor: "#fff",
            fontSize: 28,
            //字体大小
            word: res_title,
            //需要处理的文字
            maxWidth: 430,
            //一行文字最大宽度
            x: 130,
            //文字在x轴要显示的位置
            y: 280,
            //文字在y轴要显示的位置
            maxLine: 2 //文字最多显示的行数

          }); // 导语

          ctx.setFillStyle('#2C2C2C'); // 文字颜色

          ctx.setFontSize(28); // ctx.fillText('导语', 130, 520);

          this.drawText({
            ctx: ctx,
            //画布上下文
            fontColor: "#000",
            fontSize: 25,
            //字体大小
            word: res_guide,
            //需要处理的文字
            maxWidth: 430,
            //一行文字最大宽度
            x: 130,
            //文字在x轴要显示的位置
            y: 500,
            //文字在y轴要显示的位置 530
            maxLine: 3 //文字最多显示的行数

          }); // ctx.drawImage(qrcode, 130, 685, 110, 110);

          ctx.drawImage(req, 130, 665, 110, 110);
          let codeText = "长按小程序二维码查看文章详情关注查看更多本地最新资讯";
          this.drawText({
            ctx: ctx,
            //画布上下文
            fontColor: "#9E9E9E",
            fontSize: 20,
            //字体大小
            word: codeText,
            //需要处理的文字
            maxWidth: 280,
            //一行文字最大宽度
            x: 260,
            //文字在x轴要显示的位置
            y: 680,
            //文字在y轴要显示的位置700
            maxLine: 3 //文字最多显示的行数

          });
        } else {
          ctx.drawImage(bgImgPath2, 100, 200, 488, canvasHeight);
          ctx.drawImage(logoPath, 130, 240, 96, 38);
          this.drawText({
            ctx: ctx,
            //画布上下文
            fontColor: "#fff",
            fontSize: 28,
            //字体大小
            word: res_title,
            //需要处理的文字
            maxWidth: 430,
            //一行文字最大宽度
            x: 135,
            //文字在x轴要显示的位置
            y: 290,
            //文字在y轴要显示的位置
            maxLine: 2 //文字最多显示的行数

          });
          ctx.drawImage(req, 135, 500, 130, 130);
          let codeText = "长按小程序二维码查看文章详情关注查看更多本地最新资讯";
          this.drawText({
            ctx: ctx,
            //画布上下文
            fontColor: "#9E9E9E",
            fontSize: 20,
            //字体大小
            word: codeText,
            //需要处理的文字
            maxWidth: 280,
            //一行文字最大宽度
            x: 280,
            //文字在x轴要显示的位置
            y: 530,
            //文字在y轴要显示的位置
            maxLine: 3 //文字最多显示的行数

          });
        } //绘制图片


        ctx.draw();
        setTimeout(() => {
          uni.canvasToTempFilePath({
            x: 100,
            y: 200,
            width: 488,
            // canvas 宽度
            height: canvasHeight,
            destWidth: 488 * 750 / uni.getSystemInfoSync().windowWidth * 2,
            destHeight: canvasHeight * 750 / uni.getSystemInfoSync().windowWidth * 2,
            canvasId: "myCanvas",
            success: res => {
              this.setData({
                imagePath: res.tempFilePath // hidden: false,

              });
              uni.getFileSystemManager().unlink({
                filePath: req
              });
              uni.hideLoading();
            }
          }, this);
        }, 100);
      });
    },
    //处理文字多出省略号显示
    drawText: function (options) {
      options.ctx.setFontSize(options.fontSize); //设置字体大小

      options.ctx.setFillStyle(options.fontColor); //设置字体颜色

      var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);
      /*实际总共能分多少行*/

      var count = allRow >= options.maxLine ? options.maxLine : allRow; //实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数

      var endPos = 0; //当前字符串的截断点

      for (var j = 0; j < count; j++) {
        var nowStr = options.word.slice(endPos); //当前剩余的字符串

        var rowWid = 0; //每一行当前宽度    

        if (options.ctx.measureText(nowStr).width > options.maxWidth) {
          //如果当前的字符串宽度大于最大宽度，然后开始截取
          for (var m = 0; m < nowStr.length; m++) {
            rowWid += options.ctx.measureText(nowStr[m]).width; //当前字符串总宽度

            if (rowWid > options.maxWidth) {
              if (j === options.maxLine - 1) {
                //如果是最后一行
                options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * (options.fontSize + 12)); //(j+1)*40这是每一行的高度        
              } else {
                options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * (options.fontSize + 12));
              }

              endPos += m; //下次截断点

              break;
            }
          }
        } else {
          //如果当前的字符串宽度小于最大宽度就直接输出
          options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * (options.fontSize + 12));
        }
      }
    }
  }
};
</script>
<style>
/* component/shareMoments/popupShare/popupShare.wxss */

.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  left: 0;
  z-index: 2;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
}

/*content*/

.drawer_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  background: #fff;
  border-radius: 48rpx 48rpx 0 0;
}

.drawer_content {
  padding: 20rpx 40rpx;
  height: 238rpx;
  background-color: #fbfbf7;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.drawer_title {
  padding: 20rpx;
  font: 42rpx "microsoft yahei";
  text-align: center;
}

.line-btn {
  width: 2rpx;
  height: 103rpx;
  border-right: 1rpx solid #707070;
}

.drawer_title button {
  width: 210rpx;
  height: 180rpx;
  background-color: #fbfbf7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.drawer_title button image {
  width: 101rpx;
  height: 101rpx;
}

.drawer_title button text {
  font-size: 24rpx;
  color: #2d2d2d;
  margin-top: 30rpx;
}

.cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 102rpx;
  font-size: 34rpx;
}

/* share */

.canvaStyle {
 width:750px;height:1000px;
  /* background-color: #fff;
  box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
  opacity: 1;
  position: fixed;
  left: 0;
  top: 0rpx; */
}

.share {
  position: absolute;
  bottom: 100rpx;
  width: 70%;
  left: 15%;
  height: 100rpx;
  line-height: 100rpx;
}

.imagePathBox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.shengcheng {
  width: 82%;
  height: 67%;
  margin-top: 67rpx;
  margin-left: 70rpx;
  border-radius: 38rpx;
  box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}

.shengcheng2 {
  width: 82%;
  height: 53%;
  margin-top: 155rpx;
  margin-left: 70rpx;
  border-radius: 38rpx;
  box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}

.shareBox {
  width: 100%;
  height: 80%;
  background-color: #fbfbfb;
  position: fixed;
  bottom: 0;
  border-radius: 48rpx 48rpx 0 0;
}

.close-img {
  width: 30rpx;
  height: 30rpx;
  float: right;
  margin-right: 48rpx;
  margin-top: 50rpx;
}

.save-text {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  width: 100%;
  line-height: 44rpx;
  color: rgba(44, 44, 44, 1);
  opacity: 1;
  text-align: center;
  position: absolute;
  bottom: 170rpx;
}

.save-btn {
  background: #fe7920;
  box-shadow: 0rpx 6rpx 12rpx rgba(84, 141, 255, 0.4);
  border-radius: 44rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 44rpx;
  color: rgba(255, 255, 255, 1);
  padding: 20rpx 50rpx;
  position: absolute;
  bottom: 50rpx;
  text-align: center;
  left: 35%;
}

</style>